<template>
  <div>
    <r-search
      ref="search"
      :searchData="searchData"
      :searchForm="searchForm"
      :searchHandle="searchHandle"
    />
    <r-table
      :isSelection="false"
      :isHandle="true"
      :isPagination="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="pagination"
      :loading="tableLoading"
      :tableHandles="tableHandles"
      @refresh="page()"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      tableCols: [
        // { label: "设备ID", prop: "deviceId" },
        { label: "Device Number", prop: "deviceNo" },
        {
          label: "Door Number",
          prop: "cabinetNo",
          formatter: e => (e.cabinetNo ? e.cabinetNo + "号仓" : "--")
        },
        { label: "Forbidden User", prop: "userName" },
        { label: "Forbidden Cause", prop: "remark" },
        {
          label: "Forbidden/Enable",
          prop: "status",
          formatter: e =>
            e.status == 0 ? "Forbidden" : e.status == 1 ? "Enable" : "--",
          itemClass: e => (e.status == 0 ? "danger" : "success")
        },
        { label: "Enable Time", prop: "enableTime" },
        { label: "Forbidden Time", prop: "disableTime" }
      ],
      tableHandles: [],
      tableLoading: false,
      searchData: {
        deviceId: "",
        deviceNo: "",
        cabinetNo: "",
        userName: "",
        status: ""
      },
      searchForm: [
        // { type: "input", placeholder: "设备ID", prop: "deviceId", width: 180, },
        {
          type: "input",
          placeholder: "Device Number",
          prop: "deviceNo",
          width: 240
        },
        {
          type: "input",
          placeholder: "Door Number",
          prop: "cabinetNo",
          width: 240
        },
        {
          type: "input",
          placeholder: "Forbidden User",
          prop: "userName",
          width: 240
        },
        {
          type: "select",
          placeholder: "Forbidden/Enable",
          prop: "status",
          width: 260,
          options: [
            { label: "Forbidden", value: 0 },
            { label: "Enable", value: 1 }
          ]
        }
      ],
      searchHandle: [
        {
          label: "Search",
          type: "primary",
          plain: true,
          handle: async e => {
            this.zeroFn();
            this.getData();
          }
        },
        {
          label: "Reset",
          buttonss: true,
          icon: "el-icon-refresh-right",
          handle: e => {
            this.searchData = {
              deviceId: "",
              deviceNo: "",
              cabinetNo: "",
              userName: "",
              status: ""
            };
            this.zeroFn();
            this.getData();
          }
        }
      ],
      pagination: { limit: 10, offset: 1, total: 0 }
    };
  },

  async mounted() {
    this.getData();
  },
  methods: {
    zeroFn() {
      this.pagination.limit = 10;
      this.pagination.offset = 1;
      this.pagination.total = 0;
    },
    async getData() {
      let parm = {
        ...this.searchData,
        ...{
          pageNum: this.pagination.offset,
          pageSize: this.pagination.limit
        }
      };
      let res = await this.apis.cabinetDisableRecordList(parm);
      this.tableData = res.rows || [];
      this.pagination.total = res.total;
    },
    page() {
      this.getData();
    }
  }
};
</script>

<style scoped lang="scss"></style>
